<template>
<div class="purchase-history">
    <!-- 导航 -->
    <div class="purchase-history-nav">
        <img src="./img/vector_left.png" alt="" @click="back()" />
        <span class="title">授权购买记录</span>
    </div>
    <!-- 列表 -->
    <!-- @load="moreLoad" -->
    <van-list class="purchase-history-list" v-model="loading" :finished="finished" :immediate-check="false" offset="100">
        <a class="item" v-for="item in orderList" :key="item.id" href="javascript:void(0);" @click="goDetails(item)">
            <div class="top">
                <img class="avatar" :src="require(item.pid == 2?'./img/avatar.png':'./img/icon_nav_elm.png')" alt="" />
                <div class="info">
                    <p class="title">{{item.pid == 2?'美团':'饿了么'}}-{{nameType(item)}}</p>
                    <p class="order">订单号：{{item.id}}</p>
                    <p class="time">交易时间：{{FormatDateTimes(item.created_at)}}</p>
                </div>
                <img class="vector-r" src="./img/vector_right.png" alt="" />
            </div>
            <div class="bottom">
                <span class="tip_l">{{isOrderStatus(item)}}</span>
                <p>
                    <span class="tip_r">{{item.refund_info?'退款金额':'已实付'}}</span>
                    <span class="price">¥{{item.money}}</span>
                </p>
            </div>
        </a>
        <span class="not-message" v-if="orderList.length == 0">暂无记录</span>
    </van-list>
</div>
</template>

<script>
import request from "@util/request";
import qs from "qs";
import {
    apiUrl,
    FormatDateTimes
} from "@util/index";

export default {
    data() {
        return {
            orderList: [],
            loading: false,
            finished: true,
            page: 1,
        };
    },
    methods: {
        FormatDateTimes,
        goDetails(item){
            if(item.refund_info){
                location.href = `buyRefundDetail.php?id=${item.id}`
            }else{
                location.href = `buyDetail.php?id=${item.id}`
            }
        },
        back() {
            window.location.href = "user.php"
        },
        // 判断订单的状态
        isOrderStatus(item) {
            let name = ""
            // 未授权
            if (item.refund_info) {
                if (item.refund_info.status == 1) {
                    name = "退款成功"
                } else if (item.refund_info.status == 3) {
                    name = "待退款"
                }
            } else {
                name = "已支付"
            }
            return name
        },
        nameType(item) {
            let title = ""
            switch (parseInt(item.prod_id)) {
                // case 1:
                //     title = "6个月"
                //     break;
                // case 2:
                //     title = "12个月"
                //     break;
                // case 3:
                //     title = "12个月 / 2G流量"
                //     break;
                // default:
                //     title = "12个月 / 4G流量"
                //     break;
                case 5:
                    title = "1个月"
                    break;
                default:
                    title = "12个月"
                    break;
            }
            return title
        },
        // moreLoad() {
        //     this.page++;
        //     this.loading = true;
        //     this.initList();
        // },
        initList() {
            request({
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: {
                    action: "ShopService_getOrderList",
                    pid: 2,
                },
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            }).then((res) => {
                let _data = res.data;
                if (_data.ret == 0) {
                    this.loading = false;
                    this.orderList = _data.data;
                }
            });
        },
    },
    mounted() {
        this.initList();
    },
};
</script>

<style lang="less">
@import "index.less";
</style>
